import React, {FC, useEffect, useRef} from 'react';
import {View, StyleSheet, FlatList} from 'react-native';
import Title from './components/Title';
import Header from './components/Header';
import MessageStore from '../../stores/MessageStore';
import Item from './components/Item';
import Footer from './components/Footer';
import Empty from '../../components/Empty';
import {observer} from 'mobx-react';
import icon_no_collection from '../../assets/icon_no_collection.webp';
import FloatMenu, {FloatMenuRef} from './components/FloatMenu';

type PropsType = {};
const Message: FC<PropsType> = observer(() => {
  const floatMenuRef = useRef<FloatMenuRef>(null);
  useEffect(() => {
    MessageStore.requestMessageList();
  }, []);
  const refreshList = () => {
    MessageStore.resetPage();
    MessageStore.requestMessageList();
  };
  const loadMoreData = () => {
    MessageStore.requestMessageList();
  };
  return (
    <View style={styles.root}>
      <Title show={(pageY: number) => floatMenuRef.current?.show(pageY)} />
      <FlatList
        data={MessageStore.messageList}
        keyExtractor={item => `${item.id}`}
        renderItem={({item}) => <Item item={item} />}
        refreshing={MessageStore.refreshing}
        onRefresh={refreshList}
        onEndReachedThreshold={0.1}
        onEndReached={loadMoreData}
        ListHeaderComponent={<Header />}
        ListFooterComponent={<Footer />}
        ListEmptyComponent={<Empty icon={icon_no_collection} tips="暂无消息" />}
      />
      <FloatMenu ref={floatMenuRef} />
    </View>
  );
});

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: '100%',
    backgroundColor: 'white',
  },
});
export default Message;
